<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
  </head>

  <body>
    <script>
      function getPicture() {
        // 当前需要绘制的商标名 —— 用于预览展示文字商标
        var keyword = $('#brandKeyword').val()
        if (keyword == null || keyword.trim() == '') {
          var layer = layui.layer
          var index = layer.msg('请输入生成商标图样的商标名称！')
          return
        }
        // 先清除画板（上次绘制）
        $('#brandCanvas').clearCanvas({
          x: 0,
          y: 0,
          width: 600,
          height: 600,
        })
        // 绘制矩形（白色
        $('#brandCanvas').drawRect({
          fillStyle: '#FFFFFF',
          strokeStyle: '#FFFFFF',
          fromCenter: false, // 左上角定在 (x, y)
          x: 0,
          y: 0,
          width: 600,
          height: 600,
        })
        $('#brandCanvas').drawText({
          text: keyword,
          fontFamily: 'STSong', //字体
          fontSize: 80, //文字大小
          x: 300,
          y: 280,
          fillStyle: 'black', //文字背景色
          strokeStyle: 'black', //文字边框色
          strokeWidth: 1, //文字宽度
          align: 'center',
        })
        var image = new Image()
        image.src = $('#brandCanvas').getCanvasImage('jpeg')
        //        image.src = $("#brandCanvas")[0].toDataURL("image/jpg");
        image.width = 158
        image.height = 158
        $('#brandImgDiv').empty()
        $('#brandImgDiv').append(image)
      }
    </script>
  </body>
</html>
